<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../../plugin/bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" href="../../plugin/layui/css/layui.css" />
    <link rel="stylesheet" href="../../plugin/swiper/swiper.min.css" />
    <link rel="stylesheet" href="../../css/myAnimate.css" />
    <link rel="stylesheet" href="../../css/common.css" />
    <link rel="stylesheet" href="../../css/style.css" />
    <link rel="stylesheet" href="../../css/animate.css" />
    <link rel="stylesheet" href="../../css/fonts/iconfont.css" />
    <link rel="stylesheet" href="../../plugin/zTree/css/zTreeStyle.css" />
    <link rel="stylesheet" href="../../plugin/summernote/summernote.css" />

    <script type="text/javascript" src="../../js/jquery.js"></script>
    <script type="text/javascript" src="../../js/province.js"></script>

    <script
      type="text/javascript"
      src="../../plugin/bootstrap/js/bootstrap.min.js"
    ></script>
    <script type="text/javascript" src="../../plugin/layui/layui.js"></script>
    <script
      type="text/javascript"
      src="../../plugin/summernote/summernote.min.js"
    ></script>
    <script
      type="text/javascript"
      src="../../plugin/zTree/js/jquery.ztree.all.min.js"
    ></script>
    <script type="text/javascript" src="../../js/common.js"></script>
  </head>
  <body class="child_body">
    <div class="formModal">
      <div class="formHead flex">
        <div class="title flex-1">
          <span class="spanText">基础信息</span>
        </div>
        <div class="formHeadOper">
          <span class="operateView iconfont icon-more-right showMore"></span>
        </div>
      </div>
      <div class="formBox">
        <div class="form-inline row">
          <div class="formItem col-md-6 flex">
            <label class="form-label w150">输入框</label>
            <div class="flex-1 relative">
              <input
                type="text"
                class="flex-1 form-control"
                placeholder="请输入用户名"
              />
            </div>
          </div>
          <div class="formItem col-md-6 flex">
            <label class="form-label w150">日期</label>
            <div class="flex-1">
              <input
                class="form-control"
                id="datetimepicker"
                placeholder="请选择时间"
              />
            </div>
          </div>
          <div class="formItem col-md-6 flex">
            <label class="form-label w150">树下拉框</label>
            <div id="treeSelectDemo" class="comTreeSelect flex-1">
              <div class="inputBox">
                <input class="form-control" placeholder="请选择" />
                <span class="iconfont icon-arrow-down"></span>
              </div>
              <div class="comTreeBox">
                <div class="ztree" id="treeTestBox"></div>
                <div class="treeFootBtn">
                  <button class="btn btn-default btn-sm" onclick="cancelTree()">
                    取消
                  </button>
                  <button class="btn btn-info btn-sm" onclick="sureTree()">
                    确认
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="formItem col-md-6 flex">
            <label class="form-label w150">日期区间</label>
            <div
              class="flex-1 widthHalf flex items-center"
              id="dateRangePicker"
            >
              <input
                class="flex-1 form-control"
                id="startTime"
                placeholder="起始时间"
              />
              <span class="p-l-r-5">至</span>
              <input
                class="flex-1 form-control"
                id="endTime"
                placeholder="结束时间"
              />
            </div>
          </div>
          <div class="formItem col-md-6 flex">
            <label class="form-label w150">省市区</label>
            <div class="flex-1 relative">
              <span
                class="clearValue iconfont icon-close-X"
                onclick="clearInputVal(this)"
              ></span>
              <input
                type="text"
                id="myProvince"
                class="form-control"
                readonly
                placeholder="请选择"
              />
            </div>
          </div>
          <div class="formItem col-md-6 flex">
            <label class="form-label w150">input搜索</label>
            <div class="flex-1">
              <div class="input-group fullWidth">
                <input type="text" class="form-control" placeholder="请输入" />
                <div class="input-group-addon pointer w90">查询</div>
              </div>
            </div>
          </div>
          <div class="formItem col-md-6 flex">
            <label class="form-label w150">开关</label>
            <div class="flex-1 widthHalf flex items-center">
              <div class="comSwitch switchRound off"></div>
            </div>
          </div>
          <div class="formItem col-md-6 flex">
            <label class="form-label w150">checkbox</label>
            <div class="flex-1">
              <div class="comCheckBox p-t-7">
                <label class="checkbox-inline">
                  <input type="checkbox" id="inlineCheckbox1" value="option1" />
                  星期一
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" id="inlineCheckbox2" value="option2" />
                  星期二
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" id="inlineCheckbox3" value="option3" />
                  星期三
                </label>
              </div>
            </div>
          </div>
          <div class="formItem col-md-6 flex">
            <label class="form-label w150">radio</label>
            <div class="flex-1">
              <div class="comRadioBox p-t-7">
                <label class="radio-inline">
                  <input
                    type="radio"
                    name="inlineRadioOptions"
                    id="inlineRadio1"
                    value="option1"
                  />
                  不启用
                </label>
                <label class="radio-inline">
                  <input
                    type="radio"
                    name="inlineRadioOptions"
                    id="inlineRadio2"
                    value="option2"
                  />
                  启用
                </label>
              </div>
            </div>
          </div>
          <div class="formItem col-md-12 flex">
            <label class="form-label w150">备注</label>
            <div class="flex-1">
              <textarea
                class="form-control"
                placeholder="请输入用户名"
              ></textarea>
            </div>
          </div>
          <div class="formItem col-md-12 flex">
            <label class="form-label w150">副文本</label>
            <div class="flex-1">
              <div id="myEditer"></div>
            </div>
          </div>
          <div class="formItem col-md-12 flex">
            <label class="form-label w150">上传图片</label>
            <ul class="flex-1 picListBox" id="myPicList">
              <li class="item fileItem">
                <span class="iconfont icon-add-wide"></span>
                <input type="file" onchange="fileChange(this)" />
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="formBtns">
        <button class="btn btn-default">取消</button>
        <button class="btn btn-info">提交</button>
      </div>
      <div class="formHead flex">
        <div class="title flex-1">
          <span class="spanText">处置情况</span>
        </div>
        <div class="formHeadOper">
          <span class="operateView iconfont icon-more-right showMore"></span>
        </div>
      </div>
      <div class="formBox">
        <div class="form-inline row">
          <div class="formItem col-md-12 flex">
            <label class="form-label w150">响应要求回复</label>
            <div class="flex-1">
              <textarea
                class="form-control"
                placeholder="请输入用户名"
              ></textarea>
            </div>
          </div>
          <div class="formItem col-md-6 flex">
            <label class="form-label w150"
              ><span class="red">*</span>处置方全称</label
            >
            <div class="flex-1 relative">
              <input
                type="text"
                class="flex-1 form-control requeid"
                placeholder="请输入处置方全称"
              />
              <span class="errorText">错误提示</span>
            </div>
          </div>
          <div class="formItem col-md-6 flex">
            <label class="form-label w150"
              ><span class="red">*</span>填报时间</label
            >
            <div id="datePicker1"></div>
          </div>
          <div class="formItem col-md-6 flex">
            <label class="form-label w150">参与处置单位</label>
            <div class="flex-1 relative">
              <input
                type="text"
                class="form-control"
                placeholder="请输入参与处置单位"
              />
            </div>
          </div>
          <div class="formItem col-md-6 flex">
            <label class="form-label w150"
              ><span class="red">*</span>处置时间</label
            >
            <div id="datePicker2"></div>
          </div>
          <div class="formItem col-md-12 flex">
            <label class="form-label w150">事件原因</label>
            <div class="flex-1">
              <textarea
                class="form-control"
                placeholder="请输入事件原因"
              ></textarea>
            </div>
          </div>
          <div class="formItem col-md-12 flex">
            <label class="form-label w150">处置过程</label>
            <div class="flex-1">
              <textarea
                class="form-control"
                placeholder="请输入处置过程"
              ></textarea>
            </div>
          </div>
          <div class="formItem col-md-6 flex">
            <label class="form-label w150">
              <span class="red">*</span>后门排查
            </label>
            <div class="flex-1 relative">
              <select
                class="selectpicker"
                onchange="selectChangeDemo(this)"
                title="请选择"
              >
                <option>其他情况说明</option>
              </select>
            </div>
          </div>
          <div id="selectShowView" class="formItem col-md-12 flex hide">
            <label class="form-label w150"
              ><span class="red">*</span
              ><span class="label-text">其他情况说明</span></label
            >
            <div class="flex-1">
              <textarea
                class="form-control"
                placeholder="请输入其他情况说明"
              ></textarea>
            </div>
          </div>
        </div>
      </div>
      <div class="formHead flex">
        <div class="title flex-1">
          <span class="spanText">配置情况</span>
        </div>
        <div class="formHeadOper">
          <span class="operateView iconfont icon-more-right showMore"></span>
        </div>
      </div>
      <div class="formBox">
        <div class="form-inline row">
          <div class="formItem col-md-12 flex">
            <label class="form-label w150">接受超超时设置</label>
            <div class="flex-1">
              <div class="comRadioBox 7">
                <label class="radio-inline">
                  <input
                    type="radio"
                    name="inlineRadioOptions"
                    id="inlineRadio1"
                    value="option1"
                  />
                  不启用
                </label>
                <label class="radio-inline">
                  <input
                    type="radio"
                    name="inlineRadioOptions"
                    id="inlineRadio2"
                    value="option2"
                  />
                  启用
                </label>
              </div>
              <div>
                <span>以排发日计算起</span>
                <input class="form-control inline w80" />
                <span>个工作日反馈，计为超时接受</span>
              </div>
            </div>
          </div>
          <div class="formItem col-md-12 flex">
            <label class="form-label w150">处置超超时设置</label>
            <div class="flex-1">
              <div class="comRadioBox p-t-7">
                <label class="radio-inline">
                  <input
                    type="radio"
                    name="inlineRadioOptions"
                    id="inlineRadio1"
                    value="option1"
                  />
                  不启用
                </label>
                <label class="radio-inline">
                  <input
                    type="radio"
                    name="inlineRadioOptions"
                    id="inlineRadio2"
                    value="option2"
                  />
                  启用
                </label>
              </div>
              <div>
                <span>以排发日计算起</span>
                <input class="form-control inline w80" />
                <span>个工作日反馈，计为超时接受</span>
              </div>
            </div>
          </div>
          <div class="formItem col-md-12 flex">
            <label class="form-label w150">工作日规则配置</label>
            <div class="flex-1">
              <div class="comCheckBox p-t-7">
                <label class="checkbox-inline">
                  <input type="checkbox" id="inlineCheckbox1" value="option1" />
                  星期一
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" id="inlineCheckbox2" value="option2" />
                  星期二
                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" id="inlineCheckbox3" value="option3" />
                  星期三
                </label>
              </div>
            </div>
          </div>
          <div class="formItem col-md-12 flex">
            <label class="form-label w150">节假日配置</label>
            <div class="flex-1">
              <div class="comRadioBox p-t-7">
                <label class="radio-inline">
                  <input
                    type="radio"
                    name="inlineRadioOptions"
                    id="inlineRadio1"
                    value="option1"
                  />
                  不启用
                </label>
                <label class="radio-inline">
                  <input
                    type="radio"
                    name="inlineRadioOptions"
                    id="inlineRadio2"
                    value="option2"
                  />
                  启用
                </label>
              </div>
              <div class="flex items-center justify-between">
                <div>2024年01月</div>
                <div
                  class="btn-group self-btn-group"
                  role="group"
                  aria-label="..."
                >
                  <button type="button" class="btn btn-default">上个月</button>
                  <button type="button" class="btn btn-default">当月</button>
                  <button type="button" class="btn btn-default">下个月</button>
                </div>
              </div>
              <div class="myCalendar m-t-15 p-l-r-15">
                <div class="weekView flex justify-around">
                  <div>一</div>
                  <div>二</div>
                  <div>三</div>
                  <div>四</div>
                  <div>五</div>
                  <div>六</div>
                  <div>日</div>
                </div>
                <table class="calendarView">
                  <tr>
                    <td class="special"><div>01-01</div></td>
                    <td class="today"><div>01-02</div></td>
                    <td class="active"><div>01-03</div></td>
                    <td><div>01-04</div></td>
                    <td><div>01-05</div></td>
                    <td class="weekend"><div>01-06</div></td>
                    <td class="weekend"><div>01-07</div></td>
                  </tr>
                  <tr>
                    <td><div>01-08</div></td>
                    <td><div>01-09</div></td>
                    <td><div>01-10</div></td>
                    <td><div>01-11</div></td>
                    <td><div>01-12</div></td>
                    <td class="weekend"><div>01-13</div></td>
                    <td class="weekend"><div>01-14</div></td>
                  </tr>
                  <tr>
                    <td><div>01-15</div></td>
                    <td><div>01-16</div></td>
                    <td><div>01-17</div></td>
                    <td><div>01-18</div></td>
                    <td><div>01-19</div></td>
                    <td class="weekend"><div>01-20</div></td>
                    <td class="weekend"><div>01-21</div></td>
                  </tr>
                  <tr>
                    <td><div>01-22</div></td>
                    <td><div>01-23</div></td>
                    <td><div>01-24</div></td>
                    <td><div>01-25</div></td>
                    <td><div>01-26</div></td>
                    <td class="weekend"><div>01-27</div></td>
                    <td class="weekend"><div>01-28</div></td>
                  </tr>
                  <tr>
                    <td><div>01-29</div></td>
                    <td><div>01-30</div></td>
                    <td><div>01-31</div></td>
                    <td class="disabled"><div>02-01</div></td>
                    <td class="disabled"><div>02-02</div></td>
                    <td class="disabled"><div>02-03</div></td>
                    <td class="disabled"><div>02-04</div></td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
          <div class="formBtns algin-right">
            <button class="btn btn-default m-r-15">取消</button>
            <button class="btn btn-info m-r-15">提交</button>
          </div>
        </div>
      </div>
      <div class="comFormAdd">
        <span class="iconfont icon-add-thin"></span>
        <span>新增事件</span>
      </div>
      <div class="addModalBox">
        <div class="formHead flex">
          <div class="title flex-1">
            <span class="titleNumber">01</span
            ><span class="spanText">基础信息</span>
          </div>
          <div class="formHeadOper clearfix">
            <span
              title="新增事务"
              class="operAdd iconfont icon-add-rs m-r-15"
            ></span>
            <span class="operateView iconfont icon-more-right showMore"></span>
          </div>
        </div>
        <div class="formBox p-l-r-15">
          <table class="table" id="formTableList"></table>
        </div>
      </div>
    </div>
  </body>
  <script>
    $(function () {
      var datePicker1 = $("#datetimepicker").initDatePicker({ type: "date" });
      var datePicker2 = $("#dateRangePicker").initDatePicker({
        type: "datetime",
        range: ["#startTime", "#endTime"],
      });
      $(".operAdd")
        .off("click")
        .on("click", function () {
          var parent = $(this).parents(".addModalBox");
          var num = parent.find(".titleNumber").text() * 1;
          var cloneElement = parent.clone();
          cloneElement.attr("id", "copy_" + num);
          cloneElement.find(".operAdd").remove();
          cloneElement.find(".titleNumber").html("0" + (num + 1));
          parent.after(cloneElement);
        });
      //省市区
      $("#myProvince").initProvince({
        id: "myProvince",
        type: "static", //这边是根据类型用不同的组件
        codes: [], //这个在编辑的时候给的默认值
        data: [], //传入进去的数据
        // getData: getProvinceData, //根据要求加载子选项
      });
      var zNodes = [
        { id: 1, pId: 0, name: "父节点1" },
        { id: 11, pId: 1, name: "子节点1" },
        { id: 12, pId: 1, name: "子节点2" },
        { id: 2, pId: 0, name: "父节点2" },
        { id: 3, pId: 0, name: "父节点3" },
        { id: 31, pId: 3, name: "3子节点1" },
        { id: 32, pId: 3, name: "3子节点2" },
      ];
      var zTreeSettings = {
        check: {
          chkboxType: { Y: "ps", N: "ps" },
          chkStyle: "checkbox",
          enable: true,
        },
        data: {
          simpleData: {
            enable: true,
            idKey: "id",
            pIdKey: "pId",
            rootPId: 0,
          },
        },
      };
      var myTree = $.fn.zTree.init($("#treeTestBox"), zTreeSettings, zNodes);
      window.myTree = myTree;
      $("#treeSelectDemo .inputBox")
        .off("click")
        .on("click", function () {
          $(this).parent().addClass("active");
          $(this).siblings(".comTreeBox").fadeIn();
          if (window.selectNodes) {
            for (var i = 0, l = window.selectNodes.length; i < l; i++) {
              window.myTree.checkNode(window.selectNodes[i], true, true);
            }
          }
          $(document)
            .off("click")
            .on("click", function (e) {
              if (!$(e.target).parents().is(".comTreeSelect")) {
                cancelTree();
              }
            });
        });
      //销毁
      $("#myEditer").summernote("destroy");
      //初始化
      $("#myEditer").summernote({
        height: 300,
        width: "100%",
        tabsize: 2,
        placeholder: "请输入",
        lang: "zh-CN",
        callbacks: {
          onImageUpload: function (files) {
            sendFile(files);
          },
        },
      });
      //获取值
      //   $("#myEditer").summernote("code");
      //主动赋值
      $("#myEditer").summernote("code", "<h3>测试</h3>");
      var datePicker1 = $("#datetimepicker").initDatePicker({ type: "date" });
      var datePicker2 = $("#dateRangePicker").initDatePicker({
        type: "datetime",
        range: ["#startTime", "#endTime"],
      });
      // $("#formDatePicker").datePicker({
      //   dateType: "date",
      //   format: "date",
      // });
      // $("#datePicker1").datePicker({
      //   dateType: "date",
      //   format: "date",
      // });
      // $("#datePicker2").datePicker({
      //   dateType: "date",
      //   format: "date",
      // });
      // $("#formDateAreaPicker").datePicker({
      //   dateType: "daterange",
      //   format: "date",
      // });
      $(".operateView")
        .off("click")
        .on("click", function () {
          if ($(this).hasClass("showMore")) {
            $(this).removeClass("showMore").addClass("hideMore");
          } else {
            $(this).removeClass("hideMore").addClass("showMore");
          }
          $(this).parents(".formHead").next(".formBox").fadeToggle();
        });
      // var table = $("#formTableList").bootstrapTable({
      //   striped: true,
      //   queryParams: function (params) {
      //     return params;
      //   },
      //   ajaxOptions: {},
      //   dataType: "json",
      //   contentType: "application/json",
      //   url: "",
      //   method: "get",
      //   pagination: true,
      //   onlyInfoPagination: false, //只显示明细不显示右侧分页
      //   sortOrder: false,
      //   sidePagination: "client", //server
      //   pageNumber: 1,
      //   pageSize: 10,
      //   pageList: [10, 20, 50, 100],
      //   search: false,
      //   // detailView: true,
      //   paginationPreText: "下一页",
      //   paginationNextText: "上一页",
      //   columns: [
      //     {
      //       checkbox: true,
      //       align: "center",
      //       // sortable: true, //排序
      //     },
      //     {
      //       field: "name",
      //       title: "服务名",
      //       align: "center",
      //       // sortable: true, //排序
      //     },
      //     {
      //       field: "sum",
      //       title: "金额",
      //       align: "center",
      //     },
      //     {
      //       field: "PV",
      //       title: "访问量",
      //       align: "center",
      //     },
      //     {
      //       field: "name",
      //       title: "服务名",
      //       align: "center",
      //       // sortable: true, //排序
      //     },
      //     {
      //       field: "sum",
      //       title: "金额",
      //       align: "center",
      //     },
      //     {
      //       field: "PV",
      //       title: "访问量",
      //       align: "center",
      //     },
      //   ],
      //   data: [
      //     { name: "测试", sum: 100, PV: 100, operate: "" },
      //     { name: "张三", sum: 10, PV: 105, operate: "" },
      //     { name: "测试", sum: 100, PV: 100, operate: "" },
      //     { name: "张三", sum: 10, PV: 105, operate: "" },
      //     { name: "测试", sum: 100, PV: 100, operate: "" },
      //     { name: "张三", sum: 10, PV: 105, operate: "" },
      //     { name: "测试", sum: 100, PV: 100, operate: "" },
      //   ],
      //   onAll: function (data) {
      //     $(".fixed-table-pagination > .pagination").show();
      //   },
      //   // fixedColumns: {
      //   //   leftColumns: 1, //固定列
      //   //   rightColumns: 1, //固定列
      //   // },
      // });
      //按钮组点击
      $(".self-btn-group")
        .off("click", "button")
        .on("click", "button", function () {
          $(this).addClass("active").siblings().removeClass("active");
        });
    });
    /*obj 点击省市区带来的数据*/
    function getProvinceData(obj) {
      var t = $.Deferred();
      // $.ajax({
      //   success(res) {
      //     t.resolve(res);
      //   },
      //   error(xhr, status, error) {
      //     t.reject(xhr);
      //   },
      // });
      return t;
    }
    //清空绑定数据
    function clearInputVal(obj) {
      $(obj).hide().next().val("").removeData();
      $("#myProvince_comProviceBox").slideUp();
      // $("#ulItem_0").nextAll().remove();
      // $("#ulItem_0").children(".active").removeClass("active");
    }
    function selectChangeDemo(e) {
      console.log($(e).val());
      $("#selectShowView").removeClass("hide");
      $("#selectShowView").find(".label-text").html($(e).val());
    }
    function fileChange(e) {
      preview(e, "myPicList", true);
    }
    function sendFile(files) {
      var size = files[0].size;
      var formData = -new FormData();
      formData.append("file", files[0]);
      return false;
      $.ajax({
        data: formData,
        type: "post",
        url: "",
        dataType: "json",
        success: function (res) {},
        error: function () {},
      });
    }
    function cancelTree() {
      $("#treeSelectDemo").removeClass("active");
      $("#treeSelectDemo").find(".comTreeBox").fadeOut();
    }
    function sureTree() {
      //取值
      var nodes = window.myTree.getCheckedNodes(true);
      var valMap = {};
      var vals = [];
      function getNodeVal() {}
      console.log(nodes);
      //循环获取第一个父类
      for (var i in nodes) {
        var item = nodes[i];
        vals.push(item.name);
        if (item.pId == 0) {
          valMap[item.id] = [];
        }
      }
      for (var i in nodes) {
        var item = nodes[i];
        if (valMap[item.pId]) {
          valMap[item.pId].push(item.name);
        }
      }
      window.selectNodes = nodes;
      $("#treeSelectDemo .inputBox input").val(vals.join(","));
      console.log(valMap);
      cancelTree();
      //赋值
      // var nodes = window.myTree.getSelectedNodes();
      // for (var i = 0, l = nodes.length; i < l; i++) {
      //   window.myTree.checkNode(nodes[i], true, true);
      // }
    }
  </script>
</html>
